<template>
    <el-container class="layout-container">
        <el-scrollbar class="menu-scrollbar">
        <div :class="['menu-container', isCollapse?'sidebar-close':'sidebar-open']">
            
            
<el-menu
      :default-active="$route.path"
      class="nav-menu"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      background-color="#545c64"
      text-color="#fff"
      :collapse-transition="false"
      active-text-color="#ffd04b"
      router="true"
      >
      <el-menu-item index="1">测试</el-menu-item>
      <el-menu-item index="/dashboard">仪表盘</el-menu-item>
      <!-- <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一这里是导航一一一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-submenu index="1-4-1">
              <template slot="title">选项4-1</template>
              <el-submenu index="1-4-1-1">
                    <template slot="title">选项4-1</template>
                    <el-submenu index="1-4-1-1-1">
                        <template slot="title">选项4-1</template>
                        <el-submenu index="1-4-1-1-1-1">
                            <template slot="title">选项4-1</template>
                            <el-menu-item index="1-4-1-1-1-1-1">选项4-1-1-1-1-1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-submenu>
          </el-submenu>
          
        </el-submenu>
      </el-submenu>

      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一这里是导航一一一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-submenu index="1-4-1">
              <template slot="title">选项4-1</template>
              <el-submenu index="1-4-1-1">
                    <template slot="title">选项4-1</template>
                    <el-submenu index="1-4-1-1-1">
                        <template slot="title">选项4-1</template>
                        <el-submenu index="1-4-1-1-1-1">
                            <template slot="title">选项4-1</template>
                            <el-menu-item index="1-4-1-1-1-1-1">选项4-1-1-1-1-1</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-submenu>
          </el-submenu>
          
        </el-submenu>
      </el-submenu> -->
    </el-menu>


        </div>
        </el-scrollbar>
        <el-container class="right-container">
            <el-header class="header-container">

<!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group> -->
                <div class="nav-hambuger" @click="handleNavCollapse">
                    <i :class="[isCollapse?'el-icon-s-unfold':'el-icon-s-fold']" style="font-size:25px"></i>
                </div>
                <el-breadcrumb class="nav-breadcrumb" separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                </el-breadcrumb>

            </el-header>
            <el-scrollbar>
            <el-main>
                <router-view/>
            </el-main>
            </el-scrollbar>
        </el-container>
    </el-container>
</template>
<script>
export default {
    name: 'LayoutDemo',
    data() {
        return {
            isCollapse: false
        }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },

        handleNavCollapse() {
            this.isCollapse = !this.isCollapse;
        }

    }
}
</script>
<style lang="scss" scoped>

$sidebarOpenWidth: 210px;
$sidebarCloseWidth: 64px;

.layout-container {
    height: 100%;
}

.menu-scrollbar {
    background: #545C64;
}
.menu-container {
    // height: 1500px;
    width: $sidebarOpenWidth;
    background: #545C64;
    overflow-x: hidden !important;
    .nav-menu {
        border: none;
    }
}


.sidebar-open {
    animation: openSidebar 0.18s;
    width: $sidebarOpenWidth;
}
.sidebar-close {
    animation: closeSidebar 0.18s;
    width: $sidebarCloseWidth;
}


@keyframes openSidebar {
    from {width: $sidebarCloseWidth;}
    to {width: $sidebarOpenWidth;}
}

@keyframes closeSidebar {
    from {width: $sidebarOpenWidth;}
    to {width: $sidebarCloseWidth;}
}

.nav-container {
    width: 100%;
    height: 1500px;
}

.right-container {
    height: 100%;
    background:pink;
}

.header-container {
    background: palegreen;
    display: flex;
    flex-direction: row;
}

.nav-hambuger {
    margin: auto 15px auto 0;
    :hover {
        cursor: pointer;
    }
}

.nav-breadcrumb {
    font-size: 16px;
    height: 16px;
    margin: auto 0;
}
</style>